<template>
	<view class="page-box">
		<view class="logo-img">
			<!-- <view class="logo">
				
			</view> -->
			<image class="logo" :src="logoInfo.value" mode=""></image>
		</view>
		<u-row justify="center">
			<u-col span="10">
				<view class="set-tabs">
					<u-subsection :list="list" :is-scroll="false" font-size="32" height="96" button-color="#c3ad86"
						inactive-color="#fff" bg-color="" :current="current" @change="tabsChange" disable-touch="false"></u-subsection>
				</view>
				<swiper :current="swiperCurrent" @change="handleChange($event)">
					<swiper-item class="swiper-item" >
						<view class="informationOut" style="position: relative;">
							<u-form :model="loginform" ref="uForm">
								<u-form-item label="" prop="name" left-icon="account-fill" :left-icon-style="{color: '#ebd093',fontSize: '40rpx'}">
									<u-input style="width: 80%;" v-model="loginform.phone" placeholder="账号" />
								</u-form-item>
								<u-form-item class="login-form-row" label="" prop="name" left-icon="lock-fill" :left-icon-style="{color: '#ebd093',fontSize: '40rpx'}">
									<u-input style="width: 80%;" :value="this.pwd_show" @input="onInput" placeholder="密码" />
									<view style="position: absolute; right:34rpx; top: 24rpx; overflow: hidden; ">									
										<u-icon name="eye" color="#ebd093" size="40" v-if="!showPwd" @click="openShowPwd()"></u-icon>
										<u-icon name="eye-fill" color="#ebd093" size="40" v-if="showPwd" @click="closeShowPwd()"></u-icon>
									</view>
								</u-form-item>
								<!-- <u-form-item label="" prop="name" left-icon="integral-fill"
                                    :left-icon-style="{color: '#ebd093',fontSize: '40rpx'}">
                                    <u-input v-model="loginform.name" placeholder="验证码" />
                                    <u-image src="/static/uview/example/js_select.png" mode="" width="120rpx"
                                        height="40rpx"></u-image>
                                </u-form-item> -->
								<u-form-item label="" prop="name" left-icon="map-fill"
									:left-icon-style="{color: '#ebd093',fontSize: '40rpx'}">
									<view class="list-cell" style="color: #FFFFFF;position: absolute;">
										<i class="country" :class="languageChecked.short"
											style="margin-right: 15px; margin-left: 15px;"></i>
										{{ languageChecked.label }}
									</view>
									<u-dropdown ref="uDropdown">
										<u-dropdown-item>
											<view class="slot-content">
												<view class="list-cell" v-for="(languageItem, index) in language"
													:key="index + languageItem.short" @tap="changeLan(languageItem)"
													style="color: #FFFFFF;">
													<i class="country" :class="languageItem.short"
														style="margin-right: 15px; margin-left: 15px;"></i>
													{{ languageItem.label }}
												</view>
											</view>
										</u-dropdown-item>
									</u-dropdown>
								</u-form-item>
							</u-form>
						</view>
						<view class="remember">
							<u-switch @change="change()" v-model="isRemember" active-color="#ebd093" inactive-color="#606060"
								style="margin-right: 16rpx;"></u-switch> 记住密码
							<u-col span="6">
								<view class="login-test" @click="loginTest">
									试玩体验
								</view>
							</u-col>
						</view>
						<u-row justify="center">
							<u-col span="10">
								<view class="login-btn" @click="loginFun">
									登录
								</view>
							</u-col>
						</u-row>
					</swiper-item>
					<swiper-item class="swiper-item" >
						<view class="informationOut" style="margin-left: 2rpx;">
							<u-form :model="loginform" ref="uForm">
								<u-form-item label="" prop="name" left-icon="account-fill"
									:left-icon-style="{color: '#ebd093',fontSize: '40rpx'}">
									<u-input v-model="loginform.phone" placeholder="手机号" />
								</u-form-item>
								<u-form-item label="" prop="name" left-icon="lock-fill"
									:left-icon-style="{color: '#ebd093',fontSize: '40rpx'}">
									<u-input v-model="loginform.pwd" type="password" placeholder="密码"
										:password-icon="true" />
								</u-form-item>
								<u-form-item label="" prop="name" left-icon="lock-fill"
									:left-icon-style="{color: '#ebd093',fontSize: '40rpx'}">
									<u-input v-model="loginform.pwd_copy" type="password" placeholder="确认密码"
										:password-icon="true" />
								</u-form-item>
								<!-- <u-form-item label="" prop="name" left-icon="plus-people-fill"
									:left-icon-style="{color: '#ebd093',fontSize: '40rpx'}">
									<u-input v-model="loginform.nickname" placeholder="用户(不必填)" />
								</u-form-item> -->
								<u-form-item label="" prop="name" left-icon="integral-fill"
									:left-icon-style="{color: '#ebd093',fontSize: '40rpx'}">
									<u-input v-model="loginform.captcha" placeholder="验证码" />
									<u-image :src="images" mode="" width="220rpx" height="80rpx" @click="Refresh">
									</u-image>
								</u-form-item>
							</u-form>
						</view>
						<u-row justify="center">
							<u-col span="10">
								<view class="login-btn" @click="register">
									立即注册
								</view>
							</u-col>
						</u-row>
					</swiper-item>
				</swiper>
			</u-col>
		</u-row>
	</view>
</template>

<script>
	import {
		mapActions
	} from "vuex"
	import api from "@/api/api"
	import configService from '@/common/service/config.service.js';
	import customerService from '@/api/customer.js'
	export default {
		data() {
			return {
				list: [{
					name: '登录'
				}, {
					name: '注册'
				}],
				current: 0,
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				loginform: {},
				pwd_show:'',
				pwd_send:'',
				pwd_hide:'',
				pwd_number:0,
				showPwd:true,
				language: [{
					label: '中文简体',
					short: 'zh'
				}, {
					label: 'English',
					short: 'en'
				}, {
					label: '한국어',
					short: 'kr'
				}, {
					label: 'ภาษาไทย',
					short: 'th'
				}],
				languageChecked: {
					label: '中文简体',
					short: 'zh'
				},
				// 是否记住密码
				isRemember: false,
				vscode: '',
				images: '',
				//登录信息
				logoInfo: {}
			}
		},
		computed: {
			// 正确用法
			intro() {
				return this.$t('common.intro')
			}
		},
		mounted() {
			this.images = configService.apiUrl + '/verify?time=' + Math.random();
		},
		onLoad(val) {
			uni.clearStorageSync()
			this.getCustomerService()
			this.isRemember = uni.getStorageSync('isRemember')
			this.checkIsLogin()
			if(this.isRemember){
				this.loginform.phone = uni.getStorageSync('account')
				this.loginform.pwd = uni.getStorageSync('password')
			}else{
				this.loginform.phone = ''
				this.loginform.pwd = ''
			}
			uni.setStorageSync('vscodes', val.codes);
			decodeURIComponent((new RegExp('[?|&]' + 'codes' + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ''])[1].replace(/\+/g, '%20')) || null
		},
		onShow() {
			this.initAudio()
		},
		methods: {
			...mapActions(["mLogin"]),
			// 切换按钮的效果
			// switch打开或者关闭时触发，值为true或者false
			change(){
				uni.setStorageSync('isRemember',this.isRemember)
			},
			
			/**
			 * 获取logo
			 * **/
			getCustomerService() {
				customerService.getService({name: 'logo_url'}).then(res => {
					if(res.data.code == 200) {
						this.logoInfo = res.data.data
						uni.setStorageSync('logoUrl',this.logoInfo.value)
					}
				}).catch(err => {
					console.log(err)
				})
			},
			/**
			 * 登录和注册切换
			 * */
			handleChange(e){
				let current = e.detail.current;
				this.swiperCurrent = current;
				this.current = current;
			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				// let current = e.detail.current;
				// this.swiperCurrent = current;
				// this.current = current;
			},

			Refresh() {
				this.images = configService.apiUrl + '/verify?time=' + Math.random();
			},
			// 切换语言
			changeLan(item) {
				// 文字切换
				this.languageChecked = item
				this.$refs.uDropdown.close();
				// 语言切换
				this.$i18n.locale = item.short
			},
			loginFun() {
				this.loginform.pwd = this.pwd_send
				this.loading = true;
				if(this.isRemember == false) {
					uni.removeStorageSync('account')
					uni.removeStorageSync('password')
				}
				this.mLogin(this.loginform).then((res) => {
					this.loading = false;
					if (res.data.code == 200) {
						if(this.isRemember) {
							uni.setStorageSync('account', this.loginform.phone);
							uni.setStorageSync('password', this.loginform.pwd)
						}
						this.$tip.success('登录成功!')
						this.$router.push('/pages/index/index')
					} else {
						this.$tip.error(res.data.message)
					}
				}).catch((err) => {
					this.$tip.alert('请求出现错误，请稍后再试');
				}).finally(() => {
					this.loading = false;
				})
			},
			loginTest() {
				api.loginTest().then((res) => {
					if (res.data.code == 200) {
						uni.setStorageSync('login_user_info', res.data.data)
						uni.setStorageSync('Access-Token', res.data.data.token)
						this.$tip.success('登录成功!')
						this.$router.push('/pages/index/index')
					} else {
						this.$tip.alert(res.data);
					}
				})
			},
			register() {
				let pwds = this.loginform;
				if (pwds.pwd != pwds.pwd_copy) {
					this.$tip.error('两次密码不一致!')
				}
				if (uni.getStorageSync('vscodes')) {
					this.loginform.codes = uni.getStorageSync('vscodes')
				}
				api.registerLogin(this.loginform).then((res) => {
					if (res.data.code == 200) {
						this.$tip.success(res.data.message)
						this.pwd_send = pwds.pwd_copy
						
						this.loginFun()
						// this.$router.push('/pages/index/index')
						// this.$router.push('/pages/login/login')
					} else {
						this.$tip.error(res.data.message)
					}
				})
			},
			initAudio() {
				this.$innerAudioContext.src = ''
			},
			checkIsLogin(){
				let login_user_info = uni.getStorageSync('login_user_info')
				if(login_user_info.id > 0){
					uni.navigateTo({
						url:"../index/index"
					})
				}
			},
			openShowPwd(){
				this.showPwd = true
				this.pwd_show = this.pwd_send
			},
			closeShowPwd(){
				this.showPwd = false
				this.pwd_show = this.pwd_hide
			},
			/**
			 * 监听输入
			 * */
			onInput(e) {
				let miMa = e
				let repeatWord = '*'
				let lastPostion = miMa.length * 1 -1
				let pwd_number_now = miMa.length * 1
				let lastMiMa = miMa.charAt(lastPostion)
				let otherMiMaShow = this.repeat(repeatWord,lastPostion)
				let showZuHeWenZiPoint = otherMiMaShow + repeatWord
				if (pwd_number_now <= 0){
					showZuHeWenZiPoint = ''
				}
				if(!this.showPwd) {
					setTimeout(this.showPwdText(showZuHeWenZiPoint),2000)
				}
				// 第一步：隐藏特效
				
				if(this.pwd_number > pwd_number_now){
					// 缩减了
					this.pwd_send = this.pwd_send.substr(0,pwd_number_now)
				}else{
					// 增加了
					this.pwd_send += lastMiMa
				}
				this.pwd_number = pwd_number_now
				this.pwd_show = showZuHeWenZiPoint
				this.pwd_hide = showZuHeWenZiPoint

			},
			// 显示文字
			showPwdText(showZuHeWenZi){
				this.pwd_show = showZuHeWenZi
			},
			// 文字重复
			repeat(target, n) {
			    return (new Array(n + 1)).join(target);
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .uni-input-input {
		color: #FFFFFF;
	}
	// ::v-deep .u-col{
	// 	z-index: 1;
	// }
	// ::v-deep .u-item-bg{
	// 	width: 50% !important;
	// 	height: 87% !important;
	// 	background-color: #c3ad86 !important;
	// }
	
	.page-box {
		position: absolute;
		padding: 60rpx 0;
		width: 100%;
		height: 100%;
		position: relative;
		
		.login-form-row{
			position: relative;
		}
		.logo-img {
			height: 200rpx;
			width: 100%;
			margin-top: 80rpx;
			text-align: center;

			.logo {
				width: 600rpx;
				height: 172rpx;
				margin: 0 auto;
				// background: url(/static/img/login/yb11.png) no-repeat;
				// background-size: 100% 100%;
			}
		}

		.set-tabs {
			height: 100rpx;
			line-height: 100rpx;
			border: 2rpx solid #c3ad86;
			border-radius: 80rpx;
			margin-top: 40rpx;
			padding: 0 !important;
		}

		.informationOut {
			margin: auto;
			border: 1px solid #c3ad86;
			border-radius: 8px;
			margin-top: 25px;
			padding: 20px 20px 20px 20px;
		}

		.country {
			display: inline-block;
			width: 32rpx;
			height: 22rpx;
			background: url('/static/img/language/flags.png') no-repeat;
		}

		.zh {
			background-position: -208px -22px;
		}

		.en {
			background-position: -144px -154px;
		}

		.kr {
			background-position: -144px -77px;
		}

		.th {
			background-position: -160px -143px;
		}

		.remember {
			margin-top: 1rem;
			display: flex;
			align-items: center;
			color: rgba(255, 255, 255, .5);
		}

		.login-btn {
			background-image: linear-gradient(to bottom, #fcfaf3, #dcba6b);
			cursor: pointer;
			margin-top: 1.5rem !important;
			color: #000;
			padding: 14rpx;
			text-align: center;
			border-radius: 38rpx;
			letter-spacing: 2px;
		}

		.login-test {
			color: #dcba6bd1;
			text-align: right;
			text-decoration: none;
			float: right;
			font-weight: bolder;
		}

		/deep/ .u-item-bg {
			border-radius: 60rpx !important;
		}

		/deep/ uni-swiper {
			height: 840rpx;
		}
	}
	.page-box::before{
		content: " ";
		width: 100%;
		height: 100%;
		top: 0;
		content: " ";
		position: absolute;
		background: url(../../static/img/login/background.png) no-repeat;
		background-position: 50% -228rpx;
		opacity: 0.2;
	}
</style>
